<template>
  <div>
    <div class="app-container">
      <el-card class="searchTop" shadow="never">
        <div>
          <el-form :inline="true" :model="searchFormInline">
            <el-form-item label="料号编号:">
              <el-input
                v-model="searchFormInline.partId"
                placeholder="请输入料号编号检索"
                clearable
                prefix-icon="Search"
                class="ei_1"
                style="width: 190px"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card shadow="never">
        <!-- 表格数据 -->
        <div class="table">
          <el-table :data="currentTableData" :fit="true" :header-cell-style="{ textAlign: 'center' }">
            <el-table-column type="index" label="排序" align="left" width="100px"></el-table-column>
            <el-table-column prop="partId" label="料号编号" align="left"></el-table-column>
            <el-table-column prop="recipeId" label="配方编号" align="left"></el-table-column>
            <el-table-column prop="recipeTypeId" label="配方种类" align="left"></el-table-column>
            <el-table-column prop="parameterId" label="参数名称" align="left"></el-table-column>
            <el-table-column prop="parameterValue" label="参数值" align="left"></el-table-column>
          </el-table>
        </div>
        <div class="pager-foot">
          <!-- 分页 -->
          <el-pagination
            background
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="config.total"
            class="pager mt-5"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue"
import { Search, Refresh } from "@element-plus/icons-vue"
import { ElMessage, ElMessageBox, FormInstance } from "element-plus"
import { getPartDetailsDataApi } from "@/api/business/bus-partdetails"

// #region 定义属性值
/**分页配置 */
const config = reactive({
  total: 0,
  page: 1,
  size: 10,
  //进行搜索的关键词
  partId: ""
})
/**搜索绑定 */
const searchFormInline = reactive({
  partId: ""
})
/**当前表格数据 */
const currentTableData = ref()
// #endregion

onMounted(() => {
  getTableData(config)
})

// #region Table主页面相关操作
/** 关键字搜索*/
const handleSearch = () => {
  config.partId = searchFormInline.partId
  config.page = 1
  getTableData(config)
}
/**重置查询 */
const resetConfig = () => {
  Object.assign(config, {
    total: 0,
    page: 1,
    size: 10,
    partId: ""
  })
}
/**重置搜索表单内容 */
const resetSearchFormInline = () => {
  Object.assign(searchFormInline, {
    partId: ""
  })
}
/** 重置搜索*/
const resetSearch = () => {
  resetSearchFormInline()
  resetConfig()
  getTableData(config)
}

/**分页跳转 */
const handleCurrentChange = (val: number) => {
  config.page = val
  getTableData(config)
}
/** 改变每页条数 */
const handleSizeChange = (val: number) => {
  config.size = val
  getTableData(config)
}

/**获取表格数据 */
const getTableData = async (config: any) => {
  let res: any = await getPartDetailsDataApi(config)
  if (res) {
    config.total = res.data.total
    currentTableData.value = res.data.dataList
  }
}
// #endregion
</script>
<style lang="scss" scoped>
.add-container {
  padding: 20px;
}
.searchTop {
  margin-bottom: 8px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}
.table {
  display: flex;
  margin-bottom: 0px;
}
.pager-foot {
  display: flex;
  justify-content: flex-end;
}
.dialog-foot {
  display: flex;
  justify-content: end;
}
.form_description {
  :deep(.el-textarea__inner) {
    height: 100px;
  }
}
.dialog-form {
  margin-top: 20px;
}
</style>
